<div class="play-panel" [class.show]="show">
  <div class="hd">
    <div class="hdc">
      <h4>播放列表（{{ songList.length }}）</h4>
      <div class="add-all"><i class="icon" title="收藏全部"></i>收藏全部</div>
      <span class="line"></span>
      <div class="clear-all" (click)="onClearSong.emit()"><i class="icon trush" title="清除"></i>清除</div>
      <p class="playing-name">{{ currentSong?.name }}</p>
      <i class="icon close" (click)="onClose.emit()"></i>
    </div>
  </div>

  <div class="bd">
    <img src="//music.163.com/api/img/blur/109951163826278397" class="imgbg" />
    <div class="msk"></div>
    <app-wy-scroll class="list-wrap" (onScrollEnd)="scrollY = $event" [data]="songList">
      <ul>
        <li *ngFor="let item of songList; index as i" [class.current]="currentIndex === i" (click)="onChangeSong.emit(item)">
          <i class="col arrow"></i>
          <div class="col name ellipsis">{{ item.name }}</div>
          <div class="col icons">
            <i class="ico like" title="收藏"></i>
            <i class="ico share" title="分享"></i>
            <i class="ico trush" title="删除" (click)="onDeleteSong.emit(item)"></i>
          </div>
          <div class="singers clearfix ellipsis">
            <div class="singer-item" *ngFor="let singer of item.ar; last as isLast">
              <a class="col ellipsis">{{ singer.name }}</a>
              <span [hidden]="isLast">/</span>
            </div>
          </div>
          <div class="col duration">{{ item.dt / 1000 | formatTime }}</div>
          <div class="col link" title="复制链接"></div>
        </li>
      </ul>
    </app-wy-scroll>
    <app-wy-scroll class="list-lyric" [data]="currentLyric">
      <ul>
        <li *ngFor="let item of currentLyric; index as i" [class.current]="currentLineNum === i">{{ item.txt }} <br />{{ item.txtCn }}</li>
      </ul>
    </app-wy-scroll>
  </div>
</div>
